<template>
  <el-container style="height: 100%; display: flex; flex-direction: column; flex-wrap: nowrap;">
    <el-header style="background-color: #96a1a9; display: flex; align-items: center; justify-content: space-between;">
      <div style="display: flex; align-items: center;">
        <el-image src="/src/assets/top-left-log.png"></el-image>
        <el-menu router mode="horizontal" background-color="#96a1a9" text-color="#FFFFFF"
          :default-active="activeTopMenu" style="margin-left: 50px; width: 200px; height: 55px; border: none;">
          <el-menu-item v-if="$store.getters.user.operationRouterList.length" index="/operation" route="/operation">运营</el-menu-item>
          <el-menu-item v-if="$store.getters.user.financeRouterList.length" index="2">财务</el-menu-item>
        </el-menu>
      </div>
      <nav-bar></nav-bar>
    </el-header>
    <el-container class="wrapper">
      <router-view v-slot="{ Component }">
        <keep-alive>
          <component :is="Component" />
        </keep-alive>
      </router-view>
    </el-container>
  </el-container>
</template>

<script setup>
  import navBar from '@/components/nav-bar.vue';
  import cusMenu from '@/components/cus-menu/index.vue';
  import {
    useRoute
  } from 'vue-router';
  import {
    computed
  } from 'vue';
  
  const route = useRoute();
  
  const topMenus = ['/operation'];
  
  const activeTopMenu = computed(() => {
    for (let path of topMenus) {
      if (route.path.startsWith(path)) {
        return path;
      }
      return '';
    }
  })
  
</script>

<style lang="scss" scoped>
</style>
